<template>
  <view v-if="!isShow" class="deco-empty-background" :style="[innerStyle]">
    <image :style="[imageStyle]" :src="data.data.imageUrl" :mode="imageMode"></image>
  </view>
</template>

<script>
import mixin from "@/decoration/mixins"
import { useStyle, useDecoUnit, styleSizeUnit } from "@/decoration/utils/style"
export default {
  name: "deco-empty-background",
  mixins: [mixin],
  data() {
    return {
      style: {},
      wrapRect: null,
      nBackgroundColor: "",
      oBackgroundColor: "",
      cBackgroundColor: ""
    }
  },
  computed: {
    imageStyle() {
      const style = {}
      style.width = this.data.data.width > 0 ? useDecoUnit(this.data.data.width) : "100%"
      if (this.data.data.height > 0) {
        style.height = useDecoUnit(this.data.data.height)
      }
      return useStyle(style)
    },
    isShow() {
      return this.from?.content?.some((item) => item.name === "top-background")
    },
    innerStyle() {
      const style = {
        ...styleSizeUnit(this.data?.innerStyle),
        background: `linear-gradient(180deg, ${this.data.innerStyle?.background} 0%, rgba(255,255,255,0) 100%)`,
        ...this.style
      }
      return style
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      this.mitt?.on("deco-top-background.setStyle", (style) => {
        this.style = style
      })
      this.mitt?.on("deco-top-background.color", (color) => {
        this.nBackgroundColor = color
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.deco-empty-background {
  display: flex;
  transition: background-color 0.5s;
  .gradient-canvas {
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
    position: fixed;
  }
}
</style>
